<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 290px;">
        <span>请输入密码：</span>
        <input type="password" name="password" style="float: right;">
        <br>
        <br>
        <span>再次输入密码：</span>
        <input type="text" name="config_password" style="float: right;">
        <span id="msg" style="margin-left: 115px;"></span>
    </div>
</body>
<script>
    function query(name) { //定义一个函数，获取input元素
        return document.querySelector(`[name = "${name}"]`)
    }
    let msg  = document.querySelector('#msg')
    let ipt = document.querySelectorAll('[name="password"],[name="config_password"]')
    console.log(ipt);
    [...ipt].map(item=>{
        item.addEventListener('keyup',()=>{ //给获取的每个dom都注册一个键盘抬起事件
            // console.log(66);
            msg.innerHTML = '';
            if(query('password').value == query('config_password').value &&query('password').value!=''){
                msg.style.color = 'green'
                msg.innerHTML = '密码输入正确'
            }
            else{
                msg.style.color = 'red'
                msg.innerHTML = '两次密码不一致'
            }
            if(query('password').value==''|| query('config_password').value ==''){
                msg.innerHTML = ''
            }
        })
    })
</script>
</html>